<template>
    <view class="main">
        <view class="navItem" v-for="(nav,index) in navs" @click="goTo(nav)" :key="index">
            <image class="icon" :src="nav.icon" mode=""></image>
            <text class="title">{{nav.title}}</text>
            <text class="gt"> > </text>
            <view class="clear"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'nav-item',
        props: {
            navs: {
                type: Array,
            }
        },
        data() {
            return {

            }
        },
        methods: {
            goTo: function(nav) {
                if (nav.href) {
                    // 内部页面跳转
                    uni.navigateTo({
                        url: nav.href
                    })
                } else {
                    // 提示弹窗
                    this.tostMsg(nav.title)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .navItem {
        width: 94%;
        height: 64rpx;
        border-bottom: 1rpx solid lightgray;
        margin: 0 auto;
        border-radius: 0 0 15rpx 15rpx;

        padding: {
            top: 16rpx;
        }

        ;

        .title {
            float: left;

            margin: {
                left: 24rpx;
            }

            ;
            font-size: 32rpx;
        }

        .icon {
            height: 50rpx;
            width: 50rpx;
            float: left;

            margin: {
                left: 16rpx;
            }

            ;
        }

        .gt {
            float: right;

            margin: {
                right: 16rpx;
            }

            ;
            color: dimgray;
        }
    }
</style>